<template>
<el-select v-if="valueKey === 'label'" :value="value" placeholder="请选择类型" @change="onChange" clearable>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
<el-select v-else :value="value" placeholder="请选择类型" @change="onChange" clearable>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
	name: 'TypeIdSelect',
    model: {
        props: 'value',
        event: 'change',
    },
    props: {
        value: {
            type: [Number, String],
        },
        apiUrl: {
            type: String,
            default: '/admin/boat/data/typeList'
        },
        valueKey: {
            type: String,
            default: 'value',
        },
        type: {
            type: [Number, String],
        },
        reportDate: {
            type: String,
        }
    },
    data(){
        return {
            options: [],
        }
    },
    watch: {
        type: {
            handler: function(){
                this.updateOptions();
            },
        },
        reportDate: {
            handler: function(val){
                console.log(val)
                this.updateOptions();
            },
            immediate: true,
        },
    },
    methods: {
        updateOptions(){
                const params = [];
                if(this.reportDate){
                    params.push('reportDate=' + this.reportDate);
                }else{
                    return;
                }
                if(this.type){
                    params.push('type=' + this.type)
                }

                if(params.length !== 0){
					this.$axios
						.get(this.apiUrl + '?' + params.join('&')).then((res) => {
                            const {result} = res;
                            if(result){
                                this.options = result.map((item) => {
                                    return {
                                    value: item.id,
                                    label: item.name,
                                    type: item.type,
                                };
                            });
                            }
                        }).catch(e => {})

                }
        },
        onChange(e){
            this.$emit('change', e);
        }
    }
};
</script>